
<template>
    <slot name="title"></slot>
      <a-row justify="space-round">
          <a-col :span="6" v-for="itme in getMvData" :key="itme.id" >
              <div> 
                    <div style="padding: 10px">
                    <a-card class="colDiv" 
                    :title="itme.name" 
                    @click="onMvDetailsPage(itme.id)"
                    style="width: 18vw;height: 28vh; border: 3px solid black; border-radius: 2%;"
                    >
                        <img class="Mvcover" :src="itme.picUrl" alt="">
                    </a-card>
                    </div>
              </div>
          </a-col>
      </a-row>
</template>


<script lang="ts">
import { defineComponent,onMounted,reactive,toRefs } from "@vue/runtime-core";
import { useRouter } from 'vue-router'

  export default defineComponent({
     name:"app",
     props:['getMvData'],
     setup(props){
        // 解构父组件传来的数据
        const { getMvData } = toRefs(props)
        const router = useRouter()
        // 跳转到详情MV页并且传mvid过去
        function onMvDetailsPage(id:number){
            router.push({path:'mvDetail',query:{id:id}})
        }
      onMounted(()=>{
      })
      return{
          getMvData,
          onMvDetailsPage
      }
     }
  })
</script>

<style scoped lang="less">
.colDiv:hover{
   cursor: pointer;
   box-shadow: 6px 6px 3px rgba(0, 0, 0, 0.2);
}
.Mvcover{
    width: 15vw;
    height: 18vh;
    padding: 0.8rem;
    border: solid 2px rgb(0, 0, 0);
    border-radius: 2%;
}

</style>
